<script setup lang="ts">
import { isDark, toggleDark } from "~/composables";
import MyTabs from "~/components/MyTabs.vue";
import {ref} from "vue";
import QueryForm from "~/components/QueryForm.vue";

if (!isDark) toggleDark();

const columns = ref([
  {
    type: "selection",
    prop: "",
    label: ""
  },
  {
    prop: "reason",
    label: "故障原因"
  },
  {
    prop: "result",
    label: "故障结果"
  },
  {
    prop: "analysis",
    label: '故障分析',
  }
]);
const generateTableData = () => {
  const data = [];
  for (let i = 0; i < 100; i++) {
    data.push({
      reason: `故障原因示例${i}，这里是一段比较长的描述故障原因的文本，可能涉及到各种不同的情况，比如硬件故障、软件冲突等等。`,
      result: `故障结果示例${i}，可能会出现系统卡顿、功能异常或者数据丢失等情况，具体取决于故障的严重程度和影响范围。`,
      analysis: `故障分析示例${i}，详细的故障分析需要综合多方面因素，例如系统配置、运行环境、操作流程等，这里只是一个很长的用来展示分析内容的文本示例。`
    });
  }
  return data;
};
const tableData = ref(generateTableData());

const handleTabChange = (index: number) => {
  console.log(index, '点击了tab');
}

const visible = ref(false);
const handleExec = (index: number) => {
  if (index === 1) {
    // 打开知识图谱的dialog，并且显示知识图谱
    visible.value = true;
  }
}

</script>

<template>
  <el-config-provider namespace="ep">
    <header>
      知识图谱软件
    </header>
    <main>
      <div style="flex: 1; display: flex;">
        <content-area title="图谱构建" style="flex: 1; margin-right: 10px">
          <import-form @submit="console.log('导入成功')" />
          <my-tabs @on-change="handleTabChange" @on-exec="handleExec"/>
          <el-table :data="tableData" max-height="700" stripe border>
            <el-table-column
                v-for="column in columns"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :type="column.type || ''"
                :show-overflow-tooltip="true"
            ></el-table-column>
          </el-table>
          <el-dialog class="my-dialog" v-model="visible" title="知识图谱">
            知识图谱内容
          </el-dialog>
        </content-area>
        <content-area title="故障溯源" style="flex: 1">
          <query-form @submit="console.log('查询成功')"/>
        </content-area>
      </div>
    </main>
  </el-config-provider>
</template>

<style scoped>
header {
  margin-bottom: 10px;
  height: 60px;
  background-image: url(./assets/header-bg.png);
  background-size: 100% 100%;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  line-height: 60px;
  text-align: center;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px dashed #1FC6FF;
}

</style>